<template>
  <div class="person">
    <!-- 
      11 标签的ref
      使用途径:
        1. 通过给html绑定ref属性,获取标记的html内容
        2. 通过给父组件中的子组件实例绑定ref,可以获取子组件的组件实例对象,前提是子组件使用 defineExpose导出内容
    -->
    <h1>中国</h1>
    <!-- <h2 id="title2">北京</h2> -->
    <h2 ref="title2">北京</h2>
    <h3>上海</h3>
    <button @click="showMsg">点击输出h2</button>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { ref, defineExpose} from 'vue'

// 创建一个title2,用于存储ref标记的内容
let title2 = ref()
let a = ref(0)
let b = ref(1)
let c = ref(2)
const showMsg = () => {
  // 不能使用传统获取dom 其他页面有相同元素会冲突 换成 ref
  // 其他页面相同ref则不会冲突
  console.log(document.getElementById('title2'))
  console.log(title2.value)
}

defineExpose({a,b,c})

</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>